import { Menu } from "antd";
import HashSet from "hashset";
import PropTypes from "prop-types";
import React, { Component } from "react";
import FileItem from "../fileitem";
import styles from "./index.less";

export default class Folder extends Component {

  state = {
    showMenu: false,
    menuX: 10,
    menuY: 10,
    selected: -1,
    checked: new HashSet(),
  };

  handleFileItemContextMenu = (fileId) => (e) => {
    e.preventDefault();
    e.stopPropagation();
    const x = e.pageX;
    const y = e.pageY;
    this.setState({ showMenu: true, menuX: x - 20, menuY: y - 94, selected: fileId });
  };

  handleFileItemClick = (fileId) => () => {
    if (this.props.selectMode) {
      this.setState((state) => {
        const { checked } = state;
        if (checked.contains(fileId)) {
          checked.remove(fileId);
        } else {
          checked.add(fileId);
        }
        return { ...state, checked };
      });
    }
  };

  handleClick = () => {
    if (this.state.showMenu) {
      this.setState({
        showMenu: false,
        selected: -1,
      });
    }
  };

  handleContextMenu = (e) => {
    e.preventDefault();
    if (this.state.showMenu) {
      this.setState({
        showMenu: false,
        selected: -1,
      });
    }
  };

  handleMenuItemClick = ({ key: operation }) => {
    const { onShare, onDownload, onDelete } = this.props;
    if (this.state.showMenu) {
      console.log(operation);
      switch (operation) {
        case 'share':
          onShare(this.state.selected);
          break;
        case 'delete':
          onDelete(this.state.selected);
          break;
        default:
          onDownload(this.state.selected);
          break;
      }
    }
  };

  render() {
    const { selectMode = false, fileList = [] } = this.props;
    const { menuX, menuY, checked } = this.state;

    const sortedFileList = fileList.sort(({ fileName: a, type: at }, { fileName: b, type: bt }) => at === bt ? a.toUpperCase() > b.toUpperCase() ? 1 : -1 : at < bt ? 1 : -1);

    const data = sortedFileList.map(({ fileName, type, fileId }) => {
      return (
        <FileItem
          key={fileId}
          fileName={fileName}
          type={type}
          selectMode={selectMode}
          selected={fileId === this.state.selected}
          checked={checked.contains(fileId)}
          onClick={this.handleFileItemClick(fileId)}
          onContextMenu={this.handleFileItemContextMenu(fileId)}
        />
      );
    });

    return (
      <div className={styles.folder} onClick={this.handleClick} onContextMenu={this.handleContextMenu}>
        <div className={styles.menu} onContextMenu={(e) => e.preventDefault()}
             style={{ display: this.state.showMenu ? '' : 'none', left: menuX, top: menuY }}>
          <Menu mode="vertical" selectedKeys={[]} onClick={this.handleMenuItemClick}>
            <Menu.Item key="share">分享</Menu.Item>
            <Menu.Item key="delete">删除</Menu.Item>
            <Menu.Item key="download">下载</Menu.Item>
          </Menu>
        </div>
        {data}
      </div>
    );
  }
}

Folder.propTypes = {
  fileList: PropTypes.array,
  selectMode: PropTypes.bool,
  onShare: PropTypes.func,
  onDownload: PropTypes.func,
  onDelete: PropTypes.func,
};
